<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ page import="managesystem.Student"%>
<%@ page import="controlsystem.Course"%>
<%@ page import="java.util.List"%>
<%@ page import="managesystem.Buddy"%>
<%@ page import="java.util.Iterator"%>
<%@ page import="tracksystem.Activity" %>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="../scripts/jquery.wizard-tabs-0.1.min.js"></script>
<script type="text/javascript" src="../scripts/timer.js"></script>
<%
	//Als er al een activiteit is begonnen, de informatie hiervan terug in het formulier steken.
	boolean resume = false;
	String course = null;
	String date = null;
	if (request.getParameter("resume") != null) {
		resume = true;
		course = (request.getParameter("course") != null) ? request
		.getParameter("course") : null;
		date = (request.getParameter("date") != null) ? request
		.getParameter("date") : null;
	}
%>
<script type="text/javascript">

var started = false;
var stopped = false;
	//Valideert het formulier
	//En fixt de plaats
	//Enige voorwaarde, lijkt mij, is dat het aantal pagina's een getal is?
	function validate() {
		var valid = true;
		//Plaats fixen
		if($('#place').val() == "") 
			{
			$('#place').val($('#place2').val());
			}
		//Pages = nummer of niet?
		if (((parseFloat($('input[name=pages]').val()) == parseInt($(
				'input[name=pages]').val())) && !isNaN($('input[name=pages]')
				.val()))
				|| ($('input[name=pages]').val() == '')) {
		} else {
			$('#errorpages').text("This has to be a number");
			valid = false;
		}
		
		if(!started)
			{
			$('#errorsubmit').text("Don't forget to start the timer.");
			valid = false;
			}
		if(!stopped && started)
			{
			$('#errorsubmit').text("Don't forget to stop the timer");
			valid = false;
			}
		
		
		
		return valid;
	}
	
	//Klik-event binden om meerdere buddies/aids/distractions toe te voegen
	$(document).ready(function() {
		$('#btnAdd').click(function() {
			$('.selectBuddy:first').clone().insertAfter(".selectBuddy:last");
		});
		$('#btnAddAid').click(function() {
			$('.aidtools:first').clone().insertAfter(".aidtools:last");
		});
		$('#btnAddDistr').click(function() {
			$('.distractions:first').clone().insertAfter(".distractions:last");
		});
	});
	//Idem, meerdere aids

	//Hervatten we de timer, dan slaan we op wat we al weten.
	if (<%=resume%>) {
		timestart.setTime(<%=date%>);
		Start();
		started = true;
		 $(document).ready(function() {
				$('input[name=start]').hide();
				 });
	}
	
	/**
	 * startTimer: vangt de klik op de startknop af
	 ** doet een request naar de server
	 ** de server slaat de startdate, user en course op
	 ** Uiteraard mag dit maar een keer gebeuren.
	 */
	function startTimer() {
		if (!started) {
			timestart = new Date();
			var course = $('select[name=course]').val();
			$.post('/startTimer', {
				'tracking' : 'school',
				'course' : course
			});
			$('input[name=start]').hide();
			started = true;
		}
		Start();
	}
	
	function stopTimer() 
	{
		stopped=true;
		Stop();
	}
	

</script>
<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" />
<script
	src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"
	type="text/javascript"></script>
<%
	/**
	* Nodig om de selectievelden te vulden in het formulier
	*/
	Student currStud = (Student) session.getAttribute("currStud");
	List<Course> studCourses = currStud.getCourses();
	List<Buddy> studBuddies = currStud.getBuddies();
	String[] places = currStud.getPlaces();
	String[] aids = currStud.getAids();
	String[] distr = currStud.getDistractions();
%>

<form action="/trackSchool" method="post" id="form" name="form">
	<div id="tabs" Style="position:relative; top:10px">
		<ul>
			<!--  Geef de eerste tab enkel weer als dit nodig is, maw als de timer niet eerder gestart was -->
			<%
				if (!resume) {
			%><li><a href="#tabs-1">Course selection</a></li>
			<%
				}
			%>
			<li><a href="#tabs-2">Timer</a></li>
			<li><a href="#tabs-3">Statistics</a></li>

		</ul>

		<!--  Eerste tab, enkel weer te geven als het nodig is -->
		<%
			if(!resume) {
		%><div id="tabs-1">
			<p>Choose your course to track :</p>
			<select name="course">

				<%
					for (Iterator<Course> iter = studCourses.iterator(); iter.hasNext();) {
						    		   Course c = (Course) iter.next();
				%>
				<option value=<%=c.getName()%>><%=c.getName() %></option>
				<%	} %>
			</select>
		</div>
		<% } else {%>
		<input type="hidden" name="course" value="<%=course%>">
		<%}%>



		<div id="tabs-2">
			<p>Use this timer to track your studytime :</p>
			<br> Time: <input type=text name="timetextarea" value="00:00"size="10" style="font-size: 20px"> 
			<input type="hidden" name="seconds"><input type="hidden" name="minutesinseconds"> <br> <br>
			<!-- De normale Start() is hier weggelaten en vervangen door een 
						javascriptfunctie die naast de normale Start() functie aanroepen,
						ook een call doet naar de server om deze tijdelijk op te slaan -->
			<input type=button name="start" value="Start" onclick="startTimer()">
			<input type=button name="stop" value="Stop" onclick="stopTimer()">
			<!-- <input type=button name="reset" value="Reset" onclick="Reset()">-->
		</div>
		
		

		<div id="tabs-3">
			<p>Complete this form to track your study experience :</p><br />
			<fieldset>
			<label>Place :</label> 				<select name="place2" id="place2">
					<option value="" selected></option>
					
					<% 
						for(String p : places) {  %>
					<option value=<%=p%>><%=p %></option>
					<%	}
							%>
				</select> Of voeg een nieuwe plaats toe: <input type="text" name="place" id="place" />
				<br />
				
			<label>Pages :</label> <input type="text" name="pages" /><br />
			<p id="errorpages"></p>
			</fieldset>
			
			<fieldset>
			<legend>Buddies</legend>
			<label>Choose your buddy if you worked with one</label>
			<div class="selectBuddy">
				<select name="buddies">
					<option value="" selected></option>
					<% 
		    	for (Iterator<Buddy> iter = studBuddies.iterator(); iter.hasNext();) {
		    		   Buddy b = (Buddy) iter.next();
		    		  %>
					<option value=<%=b.getId()%>><%=b.getFirstname() %>
						<%=b.getLastname() %></option>
					<%
		    		}
		    	%>
				</select> <br />
			</div>
			<input type="button" id="btnAdd" value="Add another buddy" /><br />
			</fieldset>
			
			<fieldset>
			<legend>Aid Tools</legend>
			<label>Aidtools you used:</label><br/>
			<div class="aidtools">
			<select name="aids" id="aids2">
					<option value="" selected></option>
					
					<% 
						for(String a : aids) {
							if(!a.isEmpty()) {%>
					<option value=<%=a%>><%=a %></option>
					<%	 }}
							%>
				</select>Or add a new aidtools: <input type="text" name="aids" id="aid" />
			</div>
			<input type="button" id="btnAddAid" value="Add another aidTool" /><br />
			</fieldset>
			
			<fieldset>
			<legend>Distractions</legend>
			<label>Distractions you suffered from:</label><br/>
			<div class="distractions">
			<select name="distr" id="distr">
					<option value="" selected></option>
					
					<% 
						for(String d : distr) { 
							if(!d.isEmpty()) { %>
					<option value=<%=d%>><%=d %></option>
					<%	 }
					}
							%>
				</select>Or add a new distraction: <input type="text" name="distr" id="distr2" />
			</div>
			<input type="button" id="btnAddDistr" value="Add another distraction" /><br />
			</fieldset>
			
			<fieldset>
			<legend>Other Information</legend>
			<label>Type :</label> 
			<select name="type">
				<option value="lesson">Lesson</option>
				<option value="exercise">Exercise</option>
				<option value="self">Selfstudy</option>
			</select> <br /> 
			
			<label>Rating :</label> 
			<select name="rating">
				<option value="1">Bad</option>
				<option value="2">Rather ok</option>
				<option value="3">Normal</option>
				<option value="4">Good</option>
				<option value="5">Really good!</option>
			</select> <br/> 
			
			<label>What did you do :</label><br />
			<textarea name="description" COLS=30 ROWS=5></textarea><br/> 
			
			<label>Comment :</label><br />
			<textarea name="comment" COLS=30 ROWS=5></textarea><br />
			</fieldset>
			
			<p id="errorsubmit"></p>
		</div>

	</div>

</form>
<script type="text/javascript">
/**
* Valideert het formulier
* verzend het formulier als de validatie in orde is.
*/
$("#tabs").wizardTabs({
	submitAction : function() {
		if (validate()) {
			$("#form").submit();
		}
	}
});
</script>